<template>
    <div class="line">
        <router-link class="logo" to="/"></router-link>
        <router-link class="ipt" to="/search">
            <van-icon name="search" class="icon" size="19" color="#666"/>
            <span class="text">搜索商品, 共30000+款好物</span>
        </router-link>
        <router-link v-if="!userInfo.phone" to="/login" class="loginBtn">登录</router-link>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'HeaderTop',
})
</script>

<script lang="ts" setup>
let userInfo = JSON.parse(localStorage.getItem('userInfo') as string) || {}

</script>

<style scoped lang="less">
.line {
    display: flex;
    align-items: center;
    width: 345px;
    height: 28px;
    padding: 8px 15px;

    .logo {
        background-image: url('../img/sprite.png');
        width: 69px;
        height: 20px;
        // border: 1px solid lightcoral;
        margin: 0 10px 0 0;
        background-size: 188px 188px;
        background-position: 125px 21px;
        display: flex;
    }

    .ipt {
        flex-grow: 1;
        width: 221.2px;
        height: 28px;
        background-color: #ededed;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        

        .text {
            font-size: 14px;
            color: #666;
            // font-weight: 400;
            font-family: PingFangSC-Light, helvetica, Heiti SC;
        }
    }

    .loginBtn {
        width: 37px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #dd1a21;
        border: 1px solid #dd1a21;
        border-radius: 4px;
        margin-left: 8px;
        font-size: 12px;
    }
}
</style>